<template>
    <transition>
        <div>
            <div id="bcId">
                <!--盛放扫描控件的div-->
            </div>
        </div>
    </transition>
</template>
<script>
    /* eslint-disable */
    export default {
        name: 'wallet_import_scan',
        created() {
        },
        mounted() {
            let that = this;
            setTimeout(function () {
                that.startRecognize();
            }, 500);
            if (typeof plus != "undefined") {
                if ('Android' === plus.os.name) {
                    plus.key.addEventListener("backbutton", () => {
                        // “关于我们” 中打开了webview 窗口，返回需要退出此窗口
                        this.clean()
                    });
                }

            }

        },
        data() {
            return {
                light: false,
                scan: {},
                view1: "",
                view2: "",
                view3: ""
            }
        },
        methods: {
            startRecognize() {
                try {
                    let filter;
                    //自定义的扫描控件样式
                    let styles = {frameColor: "#FFFFFF", scanbarColor: "#FFFFFF", background: ""};
                    //扫描控件构造
                    this.scan = new plus.barcode.Barcode('bcId', filter, styles);
                    console.log("scan in");
                    this.scan.onmarked = this.onmarked;
                    this.scan.onerror = this.onerror;
                    this.scan.start();
                    this.createView();
                } catch (e) {
                    // alert("出现错误啦:\n" + e);
                }
            },
            onmarked(type, result) {
                this.clean();
                this.changeRoute('/wallet/import', {value: result, type: this.$route.query.tab})
            },
            onerror(e) {
                alert(e);
            },
            turnLight() {
                this.light = !this.light;
                this.scan.setFlash(this.light);
            },
            createView() {
                // 调用原生接口画图
                let that = this;

                that.view1 = new plus.nativeObj.View('leftImage', {top: '0px', left: '0px', height: '50px', width: '100%'});
                that.view1.draw([
                    {tag: 'img', id: 'img', src: 'static/img/leftwhite.png', position: {top: '25px', left: '15px', width: '24px', height: '25px'}},
                    {tag: 'font', id: 'font', text: '扫码', position: {top: '15px'}, textStyles: {size: '15px', color: "#ffffff"}}
                ]);
                that.view1.show();


                that.view2 = new plus.nativeObj.View('text', {top: '100px', left: '0px', height: '30px', width: '100%'});
                that.view2.draw([
                    {tag: 'font', id: 'font', text: '请将镜头对准二维码进行扫描', textStyles: {size: '15px', color: "#ffffff"}}
                ]);
                that.view2.show();

                that.view3 = new plus.nativeObj.View('lineImage', {bottom: '100px', left: '0px', height: '30px', width: '100%'});
                that.view3.draw([
                    {tag: 'img', id: 'img', src: 'static/img/lightning.png', position: {top: '0px', left: '48%', width: '25px', height: '25px'}},
                ]);
                that.view3.show();

                that.view1.addEventListener("click", function (e) {
                    if (e.pageX < 53) {
                        that.scan.close();
                        that.view1.close();
                        that.view2.close();
                        that.view3.close();
                        that.backRoute();
                    }
                }, false);
                that.view3.addEventListener("click", function (e) {
                    that.turnLight();
                }, false);
            },
            clean: function () {
                this.scan.close();
                this.view1.close();
                this.view2.close();
                this.view3.close();
            }

        }
    }
</script>
<style scoped>
    @import '../../assets/css/scanCode.css';

    #bcId {
        width: 100%;
        height: 100%;
        position: absolute;
        background: black;
    }

</style>